<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="vertical"
    @select="handleSelect"
  >
    <el-menu-item
      v-for="item in menu"
      :key="item.id"
      :index="item.id"
    >
      {{ item.label }}
    </el-menu-item>
  </el-menu>
</template>
<script lang="ts">
import { defineComponent,ref } from "vue"
export interface Menu {
    id:string;
    label:string;
    children: Menu | null
}
export default defineComponent({
  name: "Menu",
  props:{
    menu:{
      type:Object as Menu,
      default:() => {return{}}
    }
  },
  setup() {
    let activeIndex = ref("1")   
    const handleSelect = (val) => {
      activeIndex = val
    }
    return {
      activeIndex,
      handleSelect
    }
  }
})
</script>

<style lang="less" scoped>

</style>